<template>
  <div>
    <ElementDialog title="证件借用人员登记" width="70%" top="5%" :visible.sync="visible">
      <ElForm
        ref="dataForm"
        :model="dataForm"
        :rules="dataRule"
        label-width="120px"
        @keyup.enter.native="dataFormSubmit()">
        <ElRow :gutter="10">
          <ElCol :span="12">
            <ElFormItem label="申请名" prop="applicant">
              <ElInput
                v-model="dataForm.applicant"
                :disabled="loginNameDisable"
                placeholder="申请名"
                @focus="showSelectUser" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="申请时间" prop="applyDate">
              <ElDatePicker v-model="dataForm.applyDate" value-format="yyyy-MM-dd" placeholder="申请时间" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow :gutter="10">
          <ElCol :span="12">
            <ElFormItem label="开始使用时间" prop="useTime">
              <ElDatePicker v-model="dataForm.useTime" value-format="yyyy-MM-dd" placeholder="开始使用时间" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="预计归还时间" prop="expectReturnDate">
              <ElDatePicker v-model="dataForm.expectReturnDate" value-format="yyyy-MM-dd" placeholder="预计归还时间" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow :gutter="10">
          <ElCol :span="24">
            <ElFormItem label="说明" prop="instruction">
              <ElInput v-model="dataForm.instruction" type="textarea" placeholder="说明" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
      <template #footer>
        <span class="dialog-footer">
          <ElButton @click="visible = false">取消</ElButton>
          <ElButton v-if="canSubmit" type="primary" @click="dataFormSubmit()">确定</ElButton>
        </span>
      </template>
    </ElementDialog>
    <SelectUser v-if="visibleSelectUser" ref="selectUser" select-type="selectUserInfo" @getUserData="getUserData" />
  </div>
</template>

<script>
  import { lend } from '@/api/personnel/certificateinfo'

  export default {
    data: function () {
      return {
        visible: false,
        canSubmit: false,
        dataForm: {
          userId: 0,
          applicant: '',
          applyDate: '',
          expectReturnDate: '',
          useTime: '',
          actualReturnTime: '',
          instruction: '',
          certificateInfoId: 0
        },
        visibleSelectUser: false,
        dataRule: {
          applicant: [{ required: true, message: '申请人不能为空', trigger: 'change' }]
        },
        loginNameDisable: false
      }
    },
    methods: {
      init(certificateInfoId) {
        if (certificateInfoId === null || certificateInfoId === undefined || certificateInfoId === 0) {
          this.$notify.success('出现错误请联系管理员')
          return
        }
        this.visible = true
        this.canSubmit = true
        this.dataForm.certificateInfoId = certificateInfoId
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.canSubmit = false
            lend(this.dataForm)
              .then(data => {
                this.$notify.success(data.data.msg)
                this.visible = false
                this.$emit('refreshChange')
              })
              .catch(() => {
                this.canSubmit = true
              })
          }
        })
      },
      showSelectUser() {
        this.visibleSelectUser = true
        this.$nextTick(() => {
          this.$refs.selectUser.init()
        })
      },
      getUserData(userData) {
        this.dataForm.applicant = userData.realName // 用户id
        this.dataForm.userId = userData.userId // 用户id
      }
    }
  }
</script>
